<template>
  <div class="comments">
    <div class="comment-list-top">
      <el-form ref="findList" :inline="true" :model="findList" label-width="100px" class="findList">
        <el-form-item label="商品名称：" prop="goodsName" label-width="80px">
          <el-input
            v-model="findList.goodsName"
            placeholder="请输入商品名称"
            @change="findList.goodsName?flag__shopName=true:flag__shopName=false"
          />
        </el-form-item>
        <el-form-item label="买家名称：" prop="userName" label-width="80px">
          <el-input
            v-model="findList.userName"
            placeholder="请输入买家名称"
            @change="findList.userName?flag__userName=true:flag__userName=false"
          />
        </el-form-item>
        <el-form-item label="星级：" prop="score" label-width="70px">
          <el-select
            v-model="findList.score"
            placeholder="请选择评价星级"
            @change="findList.goodsName?flag__score=true:flag__score=false"
          >
            <el-option v-for="(item,i) in starLevel" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit('findList')">查询</el-button>
          <el-button style="background:#F6F8F9" @click="resetForm('findList')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="disabled" class="comment-list-content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#3C4353"
        active-text-color="#1182FB"
        @select="handleSelect"
      >
        <el-menu-item style="font-size:14px;" index>全部买家评价</el-menu-item>
        <el-menu-item style="font-size:14px;" index="0">未回复的评价</el-menu-item>
        <el-menu-item style="font-size:14px;" index="1">已回复的评价</el-menu-item>
      </el-menu>
      <table
        v-show="commentsList.length>0"
        border="0"
        cellpadding="0"
        cellspacing="0"
        align="center"
      >
        <thead>
          <tr>
            <th>商品图片</th>
            <th>商品名称</th>
            <th>评价星级</th>
            <th>评价内容</th>
            <th>买家</th>
            <th>评价时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item,i) in commentsList"
            :key="i"
            class="content-list-tr"
            @mouseenter="enter"
            @mouseleave="leave"
          >
            <td>
              <div class="content-list-img">
                <el-image
                  style="min-width: 80px;max-width:80px; height: 80px"
                  :src="qnPath(item.image)"
                  fit="fill"
                >
                  <div slot="error" class="image-slot">
                    <img
                      style="min-width: 80px;max-width:80px; height: 80px"
                      :src="require('../../assets/images/background-upload-false.png')"
                      alt
                    >
                  </div>
                </el-image>
              </div>
            </td>
            <td>
              <div>
                <div
                  style="min-width:200px;font-weight:600;max-width:250px;cursor:pointer;"
                  @click="toDetail(item.id)"
                >{{ item.mdseName }}</div>
                <p class="colore4e9ef">ID：{{ item.mdseId }}</p>
              </div>
            </td>
            <td>
              <div style="min-width:220px;">
                <el-rate
                  v-model="item.starLevel"
                  disabled
                  show-score
                  text-color="#ff9900"
                  :score-template="item.starLevel>4?'好评':item.starLevel>2?'中评':item.starLevel>=0?'差评':'差评'"
                />
              </div>
            </td>
            <td>
              <div style="min-width:200px;max-width:300px;">{{ item.introduce }}</div>
            </td>
            <td>
              <div>
                <div style="min-width:180px;display:flex;align-item:center;">
                  <div style="margin-right:5px;">买家：{{ item.nickName }}</div>
                  <div style="display:inline-block;">
                    <router-link :to="{name: 'Chat', query: {to: item.phone}}">
                      <img
                        :src="require('@/assets/images/icon-btn-callme.png')"
                        class="cursor_pointer"
                        style="width:63px;height:20px;"
                        alt
                      >
                    </router-link>
                  </div>
                </div>
                <div class="colore4e9ef">ID:{{ item.userId }}</div>
              </div>
            </td>
            <td>
              <div
                style="min-width:130px;margin-top:0;"
                class="colore4e9ef"
              >{{ item.createDate|filterDate }}</div>
            </td>
            <td>
              <div style="min-width:140px">
                <el-link
                  v-show="item.type === '0'"
                  type="primary"
                  :underline="false"
                  class="right_line"
                  @click="dialogFormVisible = true;replyId = item.id"
                >回复</el-link>
                <el-link type="primary" :underline="false">
                  <a @click="toDetail(item.id)">查看详情</a>
                </el-link>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-show="commentsList.length<=0" class="none">
        <div>暂无评价</div>
      </div>
      <!-- 分页 -->
      <div v-show="commentsList.length>0" class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="noticeCount"
          :hide-on-single-page="true"
          :page-sizes="[ 6, 10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 遮罩层 -->
    <el-dialog v-loading="loading" title="快捷回复" :visible.sync="dialogFormVisible">
      <div class="detail-change-remark">
        <div>回复评价：</div>
        <div class="detail-content">
          <el-input
            v-model="reply"
            type="textarea"
            placeholder="回复下评价吧，您的回复对买家印象有一定的帮助"
            maxlength="300"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 300}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureAnswer()">确认回复</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <div :class="{'wait-loading':disabled}" />
  </div>
</template>
<script>
import { getAppraise, insert } from '@/api/comments';
import { getDate, getTime } from '@/utils/date';
import { mapGetters } from 'vuex';
export default {
  filters: {
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date, true);
    }
  },
  data() {
    return {
      findList: {
        goodsName: '',
        userName: '',
        score: ''
      },
      activeIndex: '',
      commentsList: [],
      starLevel: [
        { name: '5星', id: 5 },
        { name: '4星', id: 4 },
        { name: '3星', id: 3 },
        { name: '2星', id: 2 },
        { name: '1星', id: 1 }
      ],
      // 分页
      currentPage: 1,
      pageSize: 6,
      noticeCount: 7,
      // 每页多少条
      muchData: 6,
      // 当前页码
      momentPage: 1,
      // 当前表单
      menu: '',
      // 遮罩层
      dialogFormVisible: false,
      reply: '', // 回复
      replyId: '',
      flag: false,
      disabled: false,
      loading: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  created() {
    if (this.$router.currentRoute.query.status) {
      this.activeIndex = this.$router.currentRoute.query.status;
      this.handleSelect(this.activeIndex);
    } else {
      this.getList();
    }
  },
  methods: {
    // hover test
    enter(e) {
      e.target.style.transition = 'background 0.3s';
      e.target.style.background = '#F2F7FF';
    },
    leave(e) {
      e.target.style.background = '#fff';
    },
    // 点击查询按钮
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.flag = true;
          this.getList(
            this.findList.goodsName,
            this.findList.userName,
            1,
            this.muchData,
            this.findList.score,
            this.menu
          );
          this.momentPage = 1;
          this.currentPage = 1;
        } else {
          return false;
        }
      });
    },
    // 重置表单（表头）
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.flag = false;
    },
    // 表单的位置
    handleSelect(key, keyPath) {
      this.menu = key;
      this.getList('', '', 1, this.muchData, '', key);
    },
    // 获取列表
    getList(
      mdseName = '',
      nickName = '',
      pageNo = 1,
      pageSize = 6,
      starLevel = '',
      type = ''
    ) {
      // 查看评价列表：{"mdseName":"商品名字,"nickName":"买家名称","shopId":"店铺id"，"pageNo":","pageSize":",starLevel:星级选择，type}
      // 0:未回复；1:已回复
      this.disabled = true;
      this.currentPage = pageNo;
      const param = {
        mdseName,
        nickName,
        shopId: this.shopInfo.id,
        pageNo,
        pageSize,
        starLevel,
        type
      };
      getAppraise(param).then(res => {
        for (const i of res.data.mdseAssess) {
          if (i.starLevel !== '') {
            i.starLevel = parseFloat(i.starLevel);
          } else if (i.starLevel === '') {
            i.starLevel = 0;
          }
        }
        this.commentsList = res.data.mdseAssess;
        this.noticeCount = res.data.size;
        this.disabled = false;
      });
    },
    // 每页多少条
    handleSizeChange(val) {
      this.muchData = val;
      this.flag
        ? this.getList(
          this.findList.goodsName,
          this.findList.userName,
          this.momentPage,
          this.muchData,
          this.findList.score,
          this.menu
        )
        : this.getList('', '', this.momentPage, this.muchData, '', this.menu);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.momentPage = val;
      this.flag
        ? this.getList(
          this.findList.goodsName,
          this.findList.userName,
          this.momentPage,
          this.muchData,
          this.findList.score,
          this.menu
        )
        : this.getList('', '', this.momentPage, this.muchData, '', this.menu);
    },
    toDetail(value) {
      sessionStorage.setItem('commentDetailId', value);
      this.$router.push('/comments/detail');
    },
    // 确认回复
    sureAnswer() {
      // {"userId":"店铺id","content":"回复内容","id":"评价id"}
      this.loading = true;
      const param = {
        userId: this.shopInfo.id,
        content: this.reply,
        id: this.replyId
      };
      insert(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('回复成功');
          this.getList(
            this.findList.goodsName,
            this.findList.userName,
            this.momentPage,
            this.muchData,
            this.findList.score,
            this.menu
          );
          this.dialogFormVisible = false;
          this.reply = '';
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error('回复失败');
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
.wait-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(251, 255, 253, 0.2);
}
.comments {
  margin-bottom: 30px;
  .comment-list-top {
    border-radius: 3px;
    overflow: hidden;
    .el-form {
      min-width: 1660px;
      max-width: 100%;
      height: 70px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 2%;
      display: flex;
      align-items: center;
      .el-form-item {
        font-size: 14px;
        margin: 0;
        margin-left: 15px;

        .el-icon-arrow-down {
          color: #1890ff;
          width: 11px;
          height: 8px;
        }
        .el-input {
          width: 220px;
          height: 36px !important;
          border-radius: 4px;
          /deep/.el-input__inner {
            height: 36px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            height: 36px;
            width: 220px;
          }
        }
        .el-button {
          width: 80px;
          height: 34px;
          background: rgba(17, 130, 251, 1);
          border-radius: 3px;
          margin-top: 2px;
          padding: 0;
        }
        /deep/.el-form-item__label {
          padding: 0;
          color: #3c4353;
        }
      }
    }
    .findList {
      display: flex;
      flex-flow: row nowrap;
    }
  }
  .comment-list-content {
    margin-top: 10px;
    background-color: #fff;
    min-height: calc(100vh - 306px);
    .el-menu {
      padding-left: 2%;
      .el-menu-item {
        height: 70px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 70px;
        padding: 7px;
      }
    }
    table {
      font-size: 14px;
      background: #fff;
      width: 100%;
      padding: 20px 2% 0 2%;
      line-height: 22px;
      thead {
        background: #f6f8f9;
        th {
          height: 50px;
          font-weight: 600;
          text-align: left;
          &:first-child {
            text-indent: 27px;
          }
        }
      }
      tbody {
        tr {
          td {
            border-bottom: 1px solid #e4e9ef;
            padding: 20px 32px 20px 0px;
            & > div {
              min-height: 80px;
            }
            &:first-child {
              padding-left: 27px;
            }
            .content-list-img {
              display: flex;
              flex-flow: row nowrap;
              & > div {
                div {
                  margin-left: 20px;
                  line-height: 22px;
                }
                p {
                  margin-left: 20px;
                  padding-top: 10px;
                  color: #838a9d;
                }
              }
            }
          }
        }
      }
    }
  }
}
.none {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 54vh;
  align-items: center;
  & > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.25);
    &:before {
      content: "";
      display: inline-block;
      height: 24px;
      width: 50px;
      background: url("../../assets/images/icon-cry.png") no-repeat center;
      background-size: 24px 24px;
    }
  }
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 20px;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}

/deep/.el-rate__text {
  color: #3c4353 !important;
}
.colore4e9ef {
  color: #838a9d;
  margin-top: 5px;
}
.cursor_pointer {
  cursor: pointer;
}
.right_line {
  padding-right: 10px;
  margin-right: 5px;
  border-right: 1px solid #e9e9e9;
  line-height: 14px;
}
//遮罩层
/deep/.el-dialog {
  width: 600px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 32px 0 0 70px !important;
}
/deep/.el-dialog__footer {
  text-align: left;
  padding: 0 0 50px 140px;
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
</style>
